<template>
  <view class="container">
    <view class="header">

    </view>
    <view class="contant">
      <view class="item">
        <view class="itemtitle">姓名</view>
        <input class="message" type="text" placeholder="请输入您的姓名" v-model="name">
      </view>
      <view class="item">
        <view class="itemtitle">电话</view>
        <input class="message" type="text" placeholder="请输入您的联系电话" v-model="phone">
      </view>
      <view class="item">
        <view class="itemtitle">行业</view>
        <view @click="openpicker('选择行业','occupation')" class="line">
          <input class="message" type="text" placeholder="请选择您的行业" v-model="occupation">
          <image
              class="itemicon"
              src="../../../static/business/togo.png"
            />
        </view>
      </view>
      <view class="item">
        <view class="itemtitle">城市</view>
        <view @click="openpicker('选择城市','city')" class="line">
          <input class="message" type="text" placeholder="请选择您的城市" v-model="city">
          <image
              class="itemicon"
              src="../../../static/business/togo.png"
            />
        </view>
      </view>
      <view class="title">企业资质</view>
      <view>
        <image
          class="upload"
          :src="businessImg || '/static/settlement/upload.png'"
          mode="scaleToFill"
          @click="chooseImage('business')"
        />
      </view>
      <view class="title">行业资质 <text class="add">（可上传多图）</text></view>
      <view class="lastLine">
        <image
          class="upload"
          src="/static/settlement/upload.png"
          mode="scaleToFill"
          @click="chooseImage('industry')"
        />
        <view  v-for="(item,index) in industryImg" style="position: relative;">
          <image
            :src="item"
            mode="scaleToFill"
            class="upload"
          />
          <view class="delBtn" @click="delImg(index)">删除</view>
        </view>
      </view>

      <view class="tochoose" @click="choose = !choose">
        <view class="round" :class="{active:choose,unactive:!choose}">
          <view :class="{dot:choose}"></view>
        </view>
        <view class="text">
          请阅读商家<text class="demand">《入驻要求》</text>和<text class="demand">《协议说明》</text>
        </view>
      </view>

    </view>
    <view class="submitbox">
      <view class="submit" @click="submit">提交申请</view>
    </view>
  </view>
  <uni-popup
    ref="popup"
    type="bottom"
  >
    <Picker
      :list="list"
      :title="title"
      @close="close"
      @change="change"
    />
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'
import Picker from '@/components/Picker'
import { BASE_OSS_URL } from '@/utils/request.js'
import { settled, getIndustry, getCity } from '@/service/index.ts'


// 企业资质图片
const businessImg = ref('')
// 行业资质照片
const industryImg = ref([])

// 弹窗
const popup = ref(null)

// 开启picker
const openpicker = (titles,type) => {
  list.value = []
  if(type === 'occupation'){
    list.value.push(occupationList.value)
    occupation.value = occupationList.value[0].name
  }else {
    list.value.push(privinceList.value)
    list.value.push(cityList.value)
    list.value.push(contanyList.value)
    privince.value = privinceList.value[0]?.name
    area.value = cityList.value[0]?.name
    contany.value = contanyList.value[0]?.name
    city.value = privince.value + area.value + contany.value
  }
  title.value = titles
  popup.value.open()
}

// 关闭picker
const close = () => {
  popup.value.close()
}

// picker渲染数据及标题
const list = ref([])
const title = ref('')

// 行业
const occupation = ref('')
// 行业列表
const occupationList = ref([])

// 城市
const city = ref('')
// 省
const privince = ref('')
// 区
const contany = ref('')
// 城市列表
const cityList = ref([])
// 省列表
const privinceList = ref([])
// 区列表
const contanyList = ref([])

// 选中协议
const choose = ref(false)

// 获取图片
const chooseImage = (type) => {
  wx.chooseImage({
      count: type === 'industry' ? '' : 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths
        const token = uni.getStorageSync('_TOKEN')
        tempFilePaths.forEach(item => {
          // 上传图片
          wx.uploadFile({
            url: BASE_OSS_URL + '/api/common/upload',
            filePath: item,
            name: 'file',
            header: {
              token, // 设置请求头携带 token
             },
            success: (res) => {
              if(type === 'industry'){
                industryImg.value.unshift(JSON.parse(res.data).data.fullurl)
                console.log(industryImg.value);
                wx.showToast({
                  title: '上传成功',
                  icon: 'success'
                })
              }else {
                businessImg.value = JSON.parse(res.data).data.fullurl
                console.log(businessImg.value);
                wx.showToast({
                  title: '上传成功',
                  icon: 'success'
                })
              }
            }
          })
        })
      }
    })
}

// 删除图片
const delImg = (index) => {
  industryImg.value.splice(index,1)
}
// 获取滚动信息
const change = (info) => {
  if(info[1] === '选择行业'){
    occupation.value = occupationList.value[info[0][0]].name
  }else {
    privince.value = privinceList.value[info[0][0]].name
    getCity({code:privinceList.value[info[0][0]].code}).then(res => {
      cityList.value = res
      list.value[1] = cityList.value
      area.value = cityList.value[info[0][1]].name
      getCity({code:cityList.value[info[0][1]].code}).then(res => {
        contanyList.value = res
        list.value[2] = contanyList.value
        contany.value = contanyList.value[info[0][2]].name
        city.value = privince.value + area.value + contany.value
      })
    })
  }
}

// 声明参数名
const name = ref('')
const phone = ref('')
const area = ref('')
const industry = ref('')
const enterprise_qualifications_image = ref('')
const industry_qualifications_image = ref('')

// 提交表单
const submit = () => {
  industry.value = occupation.value
  enterprise_qualifications_image.value = businessImg.value
  industry_qualifications_image.value = industryImg.value.join(',')
  console.log(industry_qualifications_image.value);
  if(!name.value){
    wx.showToast({
      title: '请输入姓名',
      icon: 'none'
    })
    return
  }
  if(!phone.value){
    wx.showToast({
      title: '请输入联系电话',
      icon: 'none'
    })
    return
  }
    // 判断手机号格式
    if (!/^1[3456789]\d{9}$/.test(phone.value)) {
    wx.showToast({
      title: '手机号格式错误',
      icon: 'none'
    })
    return
  }
  if(!industry.value){
    wx.showToast({
      title: '请选择行业',
      icon: 'none'
    })
    return
  }
  if(!city.value){
    wx.showToast({
      title: '请选择城市',
      icon: 'none'
    })
    return
  }
  if(!enterprise_qualifications_image.value){
    wx.showToast({
      title: '请上传企业资质',
      icon: 'none'
    })
    return
  }
  if(!industry_qualifications_image.value){
    wx.showToast({
      title: '请上传行业资质',
      icon: 'none'
    })
    return
  }
  if(!choose.value){
    wx.showToast({
      title: '请阅读商家《入驻要求》和《协议说明》',
      icon: 'none'
    })
    return
  }
  settled({
    name: name.value,
    phone: phone.value,
    industry: industry.value,
    city: privince.value + area.value + contany.value,
    enterprise_qualifications_image: enterprise_qualifications_image.value,
    industry_qualifications_images: industry_qualifications_image.value
  }).then(res => {
      wx.showToast({
        title: '提交成功',
        icon: 'success'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1000)
  })
}

// 获取行业列表
  getIndustry().then(res => {
    occupationList.value = res
    console.log(occupationList.value);
  })

 // 获取城市列表
  getCity({code:''}).then(res => {
    privinceList.value = res
    getCity({code:privinceList.value[0].code}).then(res => {
      cityList.value = res
      getCity({code:cityList.value[0].code}).then(res => {
        contanyList.value = res
      })
    })
  })
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: $body-bc;
  color: $content-color;
  padding-top: 17rpx;
  padding-bottom: 55rpx;
  .header {
    margin: 0 60rpx 40rpx;
    background-color: red;
    height: 80rpx;
  }
  .contant {
    padding: 0 28rpx;
    margin-bottom: 110rpx;
    .item {
      display: flex;
      align-items: center;
      padding: 37rpx 32rpx;
      background: #112959;
      box-shadow: 0rpx 10rpx 17rpx 1rpx rgba(0,14,41,0.3);
      border-radius: 15rpx;
      margin-bottom: 24rpx;
      .itemtitle {
        font-family: FZLanTingHeiS-R-GB;
        font-weight: 400;
        font-size: 30rpx;
        color: #3A75C0;
        margin-right: 52rpx;
        white-space: nowrap;
      }
      .message {
        font-family: FZLanTingHeiS-R-GB;
        font-weight: 400;
        font-size: 30rpx;
        color: #00C1FF;
        width: 100%;
      }
      .message::placeholder {
        font-size: 28px;
        color: #3A75C0;
      }
      .itemicon {
        width: 20rpx;
        height: 30rpx;
        margin-right: 15rpx;
      }
      .line {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .title {
      margin-bottom: 25rpx;
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 30rpx;
      color: #00C1FF;
    }
    .upload {
      width: 160rpx;
      height: 160rpx;
      margin: 0 7rpx;
      // background: #011434;
      box-shadow: 0rpx 10rpx 17rpx 1rpx rgba(0,14,41,0.3);
      border-radius: 15rpx;
    }
    .add {
      font-family: FZLanTingHeiS-R-GB;
      font-weight: 400;
      font-size: 24rpx;
      color: #2E5092;
    }
    .lastLine {
      margin-bottom: 100rpx;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .submitbox {
    padding: 0 94rpx;
  }
  .submit {
    background: url('/static/business/order.png') center center no-repeat;
    background-size: 100% 100%;
    padding: 37rpx 218rpx;
    font-family: FZLanTingHeiS-R-GB;
    font-weight: 400;
    font-size: 30rpx;
    color: #00C1FF;
  }
  .tochoose {
    display: flex;
    align-items: center;
    font-family: FZLanTingHeiS-R-GB;
    font-weight: 400;
    font-size: 26rpx;
    color: #3A75C0;
    .round {
      position: relative;
      width: 36rpx;
      height: 36rpx;
      background: rgba(244,102,38,0);
      border-radius: 50%;
      margin-right: 20rpx;
    }
    .demand {
      color: #00C1FF;
    }
  }
  .active {
    border: 1px solid #00BAFF;
  }
  .unactive {
    border: 1px solid #25488E;
  }
  .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20rpx;
    height: 20rpx;
    background: #00BAFF;
    border-radius: 50%;
  }
  .placeh {
    display: flex;
    align-items: center;
    font-family: FZLanTingHeiS-R-GB;
    font-weight: 400;
    font-size: 28rpx;
    color: #275B9D;
  }
  .delBtn {
    position: absolute;
    bottom: 7rpx;
    left: 0;
    width: 160rpx;
    height: 46rpx;
    background: #112959;
    border-radius: 0rpx 0rpx 15rpx 15rpx;
    opacity: 0.6;
    font-family: FZLanTingHeiS-R-GB;
    font-weight: 400;
    font-size: 24rpx;
    color: #F8FAFD;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 7rpx;
  }
}
</style>
